// components/c-selector/c-selector.ts
Component({
  options:{
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    visible: {
      type: Boolean,
      value: false
    },
    idName: {
      type: String,
      value: ""
    },
    valueOpts:{
      type: Array,
      value: []
    },
    multiple:{
      type:Boolean,
      value: false
    },
    // 默认绑定值：值数组, multiple 为false 时候，获取defaultValue数组的第一个值
    // 获取选中项更多信息，调用onchang
    defaultValue: { 
      type: Array,
      value: []
    },
    keyWords:{ // 搜索企业关键字
      type: String,
      value:""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    customStyle: "top: 132px",
    hiddenAll: false, // 是否隐藏所有的筛选项
  },
// 数据监听
  observers:{
    "visible": function(){
      if(this.data.visible){
        this.initValue()
        this.getTop()
      }
    },
    "keyWords": function(){
      // 企业搜索
      if(this.data.idName === "searchCInputId"){
        let valueOpts = this.data.valueOpts.slice();
        let keyWords = this.data.keyWords;
        if(keyWords){
          valueOpts.filter( item => {
            if(item.label.indexOf(this.data.keyWords) < 0){
              item.hidden = true;
            }else{
              item.hidden = false;
            }
            return true;
          })
        }else{
          valueOpts.filter( item => {
            item.hidden = false;
            return true;
          })
        }
        let hiddenAll = valueOpts.every( item => item.hidden)
        this.setData({
          valueOpts,
          hiddenAll
        })
      }
      
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    colseHandle(e: any){
      if(e.target.dataset.name === "mask"){
        this.setData({
          visible: false
        })
      }
    },
    // 重置
    reset(){
      this.setData({
        visible: false
      })
    },
    // 确定
    ensure(){
      let result = this.data.valueOpts.filter( item => item.checked);
      this.triggerEvent("onchange", result)
      this.setData({
        visible: false
      })
    },
    // 点击选择
    selectHandle(e: any){
      let id = e.currentTarget.dataset.id;
      let num = e.currentTarget.dataset.num;
      if(this.data.multiple){
        // 多选
        this.mutipleHandle(id, num);
      }else{
        // 单选
        this.singleHandle(id);
      }
    },
    // 多选 显示重置和确定按钮
    // 线索类型下拉弹框，全部 和其他类型互斥，不能同时勾选，且至少勾选一项
    mutipleHandle(id:string, num: string){
      // if(num && num == "0"){
      //   return;
      // }
      let valueOpts = this.data.valueOpts.slice();
      if(id === "all"){ //点击全部
        valueOpts.filter( (item,index) => {
          if(item.value == 'all'){
            valueOpts[index]["checked"] = true;
          }else{
            valueOpts[index]["checked"] = false;
          }
          return true;
        })
      }else{ //点击其他
        valueOpts.filter( (item,index) => {
          if(item.value === id){
            if(item.checked){
              item.checked = false;
              if(!valueOpts.find(it => it.checked)){
                valueOpts[0]["checked"] = true;
              }
            }else{
              item.checked = true;
              valueOpts[0]["checked"] = false;
            }
          }
          return true;
        })
      }
      this.setData({
        valueOpts
      })
    },
    // 单选 不展示按钮，点击选项关闭弹框
    singleHandle(id:[string | number]){
      let valueOpts = this.data.valueOpts.slice();
      let result = {};
      valueOpts.forEach( (item: any,index) => {
        if(item.value === id){
          valueOpts[index]["checked"] = true;
          result = valueOpts[index];
        }else{
          valueOpts[index]["checked"] = false;
        }
      })

      this.setData({
        valueOpts
      }, () => {
        this.setData({
          visible: false
        })
        this.triggerEvent("onchange", result);
      })

    },
    // onVisibleChange(event: any) {
    //   // console.log(event)
    //   const visible = event.detail.visible;
    //   this.setData({
    //     visible
    //   })
    // },
    getTop() {
      // 获取元素距离屏幕顶部的距离 + 元素的高度，设置fixed 定位的top
      //#member节点的距离顶部的距离
      const query = wx.createSelectorQuery()
      query.select("#" + this.data.idName).boundingClientRect((rect) => {
        // console.log(rect, "rect")
        let fixedTop = rect.top + rect.height + 2;
        this.setData({
              customStyle: `top: ${fixedTop}px;`
            })
      }).exec()


      // query.select("#" + this.data.idName).boundingClientRect()
      // query.selectViewport().scrollOffset()
      // query.exec( (res) => {
      //   console.log(res,"res")
      //   let fixedTop = res[0].top + res[0].height + 2;
      //   this.setData({
      //     customStyle: `top: ${fixedTop}px;`
      //   })
      // })
    },
    // 绑定值初始化
    initValue(){
      let defaultValue = this.data.defaultValue;
      if(defaultValue && defaultValue.length > 0){
        let valueOpts = this.data.valueOpts.slice()
        valueOpts.forEach( (item,index) => {
          if(defaultValue.indexOf(item.value) < 0){
            valueOpts[index]["checked"] = false;
          }else{
            valueOpts[index]["checked"] = true;
          }
        })
        this.setData({
          valueOpts
        })
      }
    }
  },
  lifetimes: {
    attached() {
      // this.getTop()
    }
  },
  pageLifetimes:{
    hide(){
      this.setData({ visible: false})
    }
  }

})